This is the start of a chrome extension, currently it contains two views. An updates view where we'll stream in updates happening on the page and a second view which contains the signals graph that we can find on the page.

Features

Updates list

We display a continuous list of updates where each will originate from a signal and then fold out to its computeds, ....

Graph view

We display a graph of each signal, where it's located and how they relate to one another.

When a signal is unsubscribed we should remove it from the graph.

Limitations

Currently we only show things when updates start happening but technically we could be eager about this and when we see a _subscribe/_callback happening we could report it to the devtools.

Missing

Detecting components

Components will need to call a method on the DevToolsCommunicator where they convey that they are entering a component, in Preact we can leverage the options hooks and in react we can leverage the Babel plugin to add an argument to useSignals where this can be used to perform communication to the devtools extension in development.

After a bit of fiddling around, detecting components is proving a bit challenging. It would basically need to be a new Node, we need to detect when we are within a component, when we see signal._subscribe being called we need to know that we are in a component. Then we add that component to i.e. a WeakMap of Signal --> Array. When a component unmounts we need to track which signals are unsubscribed and remove those components from the array of strings.

A different option for React http://github.com/welldone-software/why-did-you-render/blob/master/src/helpers.js

Adding line-numbers and file-names

Another thing that needs to happen is adding a Babel plugin to automatically add names to every signal/computed/effect in user-code. We could use this to add fileName + lineNumber.

Follow ups

• React
  • Add to the React babel plugin a way to convey the componentName as the second argument to useSignals Add signal names #730
• Preact
  • Deal with hot-reloading of prefresh, currently this can duplicate componentNames
  • Unmounting components should update the graph
  • Add a babel plugin to give meaningful names to signals/computeds/effects automatically in dev (and add lineNumber + filename to the signal)
  • For Preact surface when a signal leads to a text-node/attribute-node update
    • Currently attribute-nodes count as re-rendering the component, maybe in options._diff when we walk props we do an exitComponent and then re-enter after we're done
• UI improvements
  • Repeated updates should collapse
  • We should be able to fold an update-group